<template>
	<view class="page colorBj-e1e1e1">
		<view class="" style="flex: 1;">
			<!-- <up-navbar title="百霸智育" @rightClick="{}" :autoBack="true" bgColor="#f1f1f1" placeholder></up-navbar> -->
			<!-- <up-navbar title="" @rightClick="{}" :autoBack="true" bgColor = "#fff" placeholder></up-navbar> -->
			<view class="">
				<view class="width-full height-full padding-30 box-sizing">
					<up-tabs :scrollable="false" :list="tabs" @click="tabClick"></up-tabs>
					<view class="" v-if="video_open == 1">
						<video :src="currentVideoSrc" @play="onPlay" @pause="onPause" @ended="onEnded"
							:autoplay="shouldAutoplay" class="video"></video>
					</view>
					<view class="paddingBottom-20 u-border-bottom paddingTop-20" v-for='(item,index) in list'
						:key='index'>

						<view class="flex items-center ">
							<view class="weight-700 marginRight-10">
								{{item.b_title}}
							</view>
							<view class="flex items-center" v-for="(i, index) in item.s_title" :key="index">
								<view
									class="width-20 height-20 borderRadius-10 marginLeft-10 marginRight-10 colorBj-fff"
									:style="{ borderColor: getColorForSubTitle(index, item), borderWidth: '2px', borderStyle: 'solid'}">
								</view>
								<view class="fontSize-26 color-aaa">
									{{ i }}
								</view>
							</view>

						</view>
						<view class="flex items-center flex-wrap">

							<view
								class="borderRadius-10 text-center colorBj-fff item-box width-100 height-60 marginLeft-20 marginTop-20"
								v-for='(item,index) in item.phonetic' :key='index'
								:style="{ borderColor: getColorByTag(item.tag), borderWidth: '2px', borderStyle: 'solid'  }"
								@click="changeVideoSrc(item)">
								{{item.phonetic}}
							</view>
						</view>
					</view>


				</view>
			</view>

		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		reactive
	} from 'vue';
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'

	const list = ref([])
	const video_open = ref(0)
	const currentVideoSrc = ref('')

	const phoneticIndexApi = inject('phoneticIndex');
	const shouldAutoplay = ref(false);
	const tabs = ref([{
			name: '英式发音'
		},
		{
			name: '美式发音'
		},
	]);
	onLoad((op) => {


		if (op.index == 0) {
			phoneticIndexApi({
				pro_sys: 'IPA'
			}).then(res => {
				console.log(res, '音标接口');
				list.value = res.list
				video_open.value = res.video_open
				currentVideoSrc.value = res.list[0].phonetic[0].video
				console.log('currentVideoSrc.value', currentVideoSrc.value)

			});
		} else if (op.index == 1) {
			phoneticIndexApi({
				pro_sys: 'KK'
			}).then(res => {
				console.log(res, '音标接口');
				list.value = res.list
				video_open.value = res.video_open
				currentVideoSrc.value = res.list[0].phonetic[0].video
				console.log('currentVideoSrc.value', currentVideoSrc.value)
			});
		}
	});
	const tabClick = (e) => {
		// console.log(e)
		if (e.index == 0) {
			phoneticIndexApi({
				pro_sys: 'KK' //英式
			}).then(res => {
				// console.log(res, '音标接口');
				list.value = res.list
				video_open.value = res.video_open
				currentVideoSrc.value = res.list[0].phonetic[0].video
				console.log('currentVideoSrc.value', currentVideoSrc.value)
				subTitleColorIndex = 0
				currentIndex.value = e.index
			});
		} else if (e.index == 1) {
			phoneticIndexApi({
				pro_sys: 'IPA' //美式
			}).then(res => {
				// console.log(res, '音标接口');
				list.value = res.list
				video_open.value = res.video_open
				currentVideoSrc.value = res.list[0].phonetic[0].video
				console.log('currentVideoSrc.value', currentVideoSrc.value)
				subTitleColorIndex = 0
				currentIndex.value = e.index
			});
		}
	}

	const colorMap = new Map();
	const definedColors = ['#f7bfd4', '#cfe1d2', '#99caf1', '#9176c3', '#fbcfbe', '#fcbd71', '#71d5a1', '#c8c9cc'];
	const getColorByTag = (tag) => {
		if (!colorMap.has(tag)) {
			colorMap.set(tag, definedColors[colorMap.size % definedColors.length]);
		}
		return colorMap.get(tag);
	};
	let subTitleColorIndex = 0;
	const getColorForSubTitle = (index, item) => {
		const color = definedColors[subTitleColorIndex];
		subTitleColorIndex = (subTitleColorIndex + 1) % definedColors.length;
		return color;
	};

	// up-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
	const radiovalue1 = ref('苹果');

	const groupChange = (n) => {
		console.log('groupChange', n);
	};

	const radioChange = (n) => {
		console.log('radioChange', n);
	};
	const changeVideoSrc = (item) => {
		// console.log('item', item);
		currentVideoSrc.value = item.video
		shouldAutoplay.value = true;
		// console.log('shouldAutoplay',shouldAutoplay)

	};

	// const shouldAutoplay = computed(() => list.video_open.value === 1);
</script>

<style lang="scss" scoped>
	.page {
		flex: 1;
		background-color: #f1f1f1;
		height: 100%;
	}


	.btns {
		padding-bottom: calc(50rpx);
	}

	.item-box {
		line-height: 60rpx;
	}

	.video {
		width: 100%;
	}
</style>